<template>
  <div>
    <waterfall :col="2" :data="flowGoodsList" :loadDistance="10">
      <template>
        <div
          class="goodslist"
          v-for="(item, index) in flowGoodsList"
          :key="index"
        >
          <router-link :to="{ name: 'Goods', params: { id: item.id } }">
            <img :src="item.img" />
            <p class="goodslist-title">{{ item.title }}</p>
            <div class="goodslist-tags-out">
              <van-tag
                v-for="(item2, index) in item.tags"
                type="primary"
                :key="index"
                class="goodslist-tags"
              >
                {{ item2 }}
              </van-tag>
            </div>
            <p class="goodslist-price">￥{{ item.price }}</p>
            <p class="goodslist-subtitle">
              {{ item.description }}
            </p>
          </router-link>
        </div>
      </template>
    </waterfall>
  </div>
</template>

<script>
export default {
  name: "CategoryList",
  data() {
    return {
      flowGoodsList: [],
      params: {},
    };
  },
  created() {
    if (this.$route.query.isRoot) {
      this.params = { isRoot: true };
    }
    this.getCategory();
  },
  methods: {
    getCategory() {
      this.$http
        .get(`spu/category/${this.$route.query.id}`, {
          params: this.params,
        })
        .then((result) => {
          this.flowGoodsList = result.data.list;
          this.flowGoodsList.forEach((item) => {
            if (item.tags) item.tags = item.tags.split("$");
          });
        });
    },
  },
};
</script>

<style scoped >
@media screen and (max-width: 800px) {
  .goodslist {
    background: white;
    text-align: left;
    float: left;
    width: 170px;
    margin: 8px 8px;
    padding-bottom: 10px;
    box-shadow: 0 0 4px rgb(64, 44, 47);
    border-radius: 8px 8px 8px 8px;
  }
  .goodslist img {
    border-radius: 8px 8px 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}
@media screen and (min-width: 820px) {
  .goodslist {
    background: white;
    text-align: left;
    float: left;
    width: 96%;
    margin: 8px 8px;
    padding-bottom: 10px;
    box-shadow: 0 0 4px rgb(64, 44, 47);
    border-radius: 8px 8px 8px 8px;
  }
  .goodslist img {
    border-radius: 8px 8px 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .goodslist-subtitle {
    word-wrap: break-word;
    padding: 5px 10px 0 11px;
    color: rgb(95, 126, 151);
    font-size: 12px;
  }
  .goodslist-background {
    height: 500px;
    background-color: rgb(169, 221, 187);
  }
  .goodslist-title {
    background: rgb(201, 174, 115);
    font-size: 5px;
    padding-top: 2px;
    margin-top: 2px;
    margin-left: 4px;
    color: white;
  }
  .goodslist-tags-out {
    margin-left: 6px;
  }
  .goodslist-price {
    padding-top: 5px;
    color: rgb(62, 62, 131);
    padding-left: 10px;
  }
}
</style>